{% extends 'home.html' %}

{% block title %}
    {{ user_obj.blog.site_title }}
{% endblock %}

{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url('/static/img/upup.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('/static/img/downdown.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="col-md-2">
        {% load mytag %}
        {% left_menu user_obj.blog %}
    </div>
    <div class="col-md-10">
        <div>
            <h2>{{ article_obj.title }}</h2>
            <div>{{ article_obj.content|safe }}</div>
        </div>
        <!--点赞点踩样式-->
        <div  class="clearfix">
            <div id="div_digg">
                <div class="diggit btnTag">
                    <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
                </div>
                <div class="buryit btnTag">
                    <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips" style="color: red">
                </div>
            </div>
        </div>
        <!--文章评论展示-->
        <div class="comment_list">
            {% for comment in comment_list %}
                <div style="border: 1px solid cornflowerblue;padding: 10px">
                    <span>#{{ forloop.counter }}楼</span>
                    <span>{{ comment.comment_time|date:'Y-m-d H:i' }}</span>
                    <a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a>
                    <span class="pull-right">
                        <a href="#" class="sonReply" comment_id="{{ comment.pk }}">回复</a>
                        <a href="#">引用</a>
                    </span>
                    <div style="padding: 10px">
                        <!--判断当前评论对象是根评论还是子评论 如果是子评论 需要额外渲染出对应子评论对应的根评论人姓名-->
                        {% if comment.parent_id %}
                            <p>@{{ comment.parent.user.username }}</p>
                        {% endif %}
                        {{ comment.content }}
                    </div>
                </div>
            {% endfor %}
        </div>
        <!--文章评论样式-->
        {% if request.user.is_authenticated %}
            <div id="div_comment" >
                <p><span class="glyphicon glyphicon-comment"></span>发表评论</p>
                <textarea name="" id="content" cols="30" rows="10" class="form-control"></textarea>
                <button class="btn btn-primary" id="btnComment">发表评论</button>
            </div>
        {% else %}
            <span>评论功能需要登录之后才可操作</span>
        {% endif %}
    </div>
{% endblock %}

{% block js %}
    <script>
        // 点赞点踩业务逻辑
        $('.btnTag').click(function () {
            // 判断当前标签是否含有某个特征类属性
            let upOrDown = $(this).hasClass('diggit');
            let currentEle = $(this);
            // 发送ajax请求
            $.ajax({
                url:'/up_or_down/',  // 点赞点踩业务比较复杂 单独开设路由处理
                type:'post',
                data:{
                    'article_id':'{{ article_obj.pk }}',
                    'up_or_down':upOrDown,
                    // 用户数据不用传 后端直接获取当前登录用户更方法
                    'csrfmiddlewaretoken':'{{ csrf_token }}'
                },
                success:function (args) {
                    if(args.code === 10000){
                        // 渲染提示信息
                        $('#digg_tips').text(args.msg)
                        // 数字动态加一
                        // 1.先获取原本的点赞数或者点踩数 并转换成数值类型 便于后续的数学运算
                        let oldNum = Number(currentEle.children().text())
                        // 2.自增1并重新赋值即可
                        currentEle.children().text(oldNum + 1)
                    }else{
                        $('#digg_tips').html(args.msg)
                    }
                }
            })
        })

        // 由于评论的主键值需要在多个时间绑定的函数中使用 所以可以采用全局变量的形式
        let parentId = null;
        // 文章评论业务逻辑
        $("#btnComment").click(function () {
            // 提前获取所需数据
            let content = $('#content').val()
            let articleId = '{{ article_obj.pk }}'
            // 判断parent_id是否有值 如果有 则需要对内容做切割处理 过滤掉自动添加的数据
            if(parentId){
                let indexNum = content.indexOf('\n') + 1  // 获取切割的索引值  5
                content = content.slice(indexNum)  // 根据索引截取出后面的部分 移除0:5 保留5之后的
            }
            // 发送ajax请求
            $.ajax({
                url:'/comment/',
                type:'post',
                data:{
                    'content':content,
                    'article_id':articleId,
                    'csrfmiddlewaretoken':'{{ csrf_token }}',
                    'parent_id':parentId
                },
                success:function (args) {
                    // 先清空评论内容
                    $('#content').val('');
                    // 创建评论相关标签 临时渲染评论楼
                    let mdStr = `
                        <div style="border: 1px solid cornflowerblue;padding: 10px">
                        <span class="glyphicon glyphicon-comment"></span>
                        <span>{{ request.user.username }}</span>
                        <div style="padding: 10px">
                           ${content}
                        </div>
                    </div>
                    `
                    // 动态添加到评论楼中
                    $('.comment_list').append(mdStr)
                    // 重置全局变量
                    parentId = null;
                }
            })
        })
        // 子评论业务逻辑
        $('.sonReply').click(function () {
            let sonEle = $(this);
            // 获取当前评论人姓名
            let targetName = sonEle.parent().prev().text();
            // 评论框聚焦并填写内容  可以追加()  $('#content').focus().val($('#content').val()+'@'+targetName+'\n')
            $('#content').focus().val('@'+targetName+'\n')
            // 获取回复按钮所在评论的主键值
            let commentId = sonEle.attr('comment_id')
            // 赋值给全局的变量
            parentId = commentId
        })
    </script>
{% endblock %}